<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_hader" th:content="${_csrf.headerName}"/>
    <title>库存管理</title>
    <!--<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}"/>-->
    <!--<script th:src="@{/jquery/jquery-3.0.0.min.js}" ></script>-->
    <!--<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}"/>
    <script th:src="@{/jquery/jquery.twbsPagination.min.js}"></script>
    <script th:src="@{/js/tooltips/iziToast.min.js}" type="text/javascript"></script>
    <link rel="stylesheet" th:href="@{/css/tooltips/iziToast.css}"/>
    <script th:src="@{/bootstrap/js/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap-datetimepicker.zh-CN.js}"></script>
</head>
<script>
    var productCodeMap = {};
    var currentMarketId;
    var initParam = {
        "tableid" : "showListTable", //表格字段
        "url" : "/marketController/marketList",
        "optstr" : "数据操作字段",
        "searchid" : "searchDiv",
        "pageidc" : "pagination-c",
        "pageidp" : "pagination-p",
        "opt" : [
            {
                showContent : '<span class="label label-success">编辑</span>',
                functionName : "add"
            },
            {
                showContent : '<span class="label label-danger">删除</span>',
                functionName : "del"
            },
            {
                showContent : '<span class="label label-info">详细</span>',
                functionName : "view"
            },
            {
                showContent : '<span class="label label-info">文件</span>',
                functionName : "viewFile"
            }
        ]
//
//
//                '&nbsp;' +
//                '<span style="cursor: pointer" class='label label-info'>详细</span>&nbsp;' +
//                '<span style="cursor: pointer" class='label label-danger'>删除</span>'
    }
    $(function(){
        initMenu("indexNav","marketMenu");
        initList(initParam);
        $('.form_date').datetimepicker({
            language: 'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
        $.each($("#productType option"),function(i,value){
            if(value.value != ''){
                var key = "productId" + value.value;
                productCodeMap[key] = value.text;
            }
        });
    });
    function search(){
        initList(initParam);
    }
    function add(id){
        window.location.href = "/marketController/editMarketPage?id=" + id;
    }
    function del(id){
//        alert(id);
        showConfirmDialog("是否删除","","delCallback(" + id + ")","mydialog");
    }
    function delCallback(id){
        $.ajax({
            url:"/marketController/delMarket",
            type:'POST',
            data : {id:id},
            async : false,
            success:function (data) {
                var success = data.success;
                if(success){
                    showSuccessMsg("删除成功");
                    initList(initParam);
                }else{
                    showErrorMsg(data.msg);
                }
            }
        });
        $("#mydialog").modal("hide");
    }
    //详细
    function view(id){
        $.ajax({
            url:"/marketController/viewMarket",
            type:'POST',
            data : {marketId:id},
            async : false,
            success:function (data) {
//                var success = data.success;
//                if(success){
//                    showSuccessMsg("删除成功");
//                    initList(initParam);
//                }else{
//                    showErrorMsg(data.msg);
//                }
                var market = data.attributes.market;
                var marketDetailList = data.attributes.marketDetailList;
                //修改标题
                $("#viewDetailModal .modal-title").html("销售编号：" +market.marketNo);
                //销售主信息
                $("#customerNameModal").html(market.customerName);
                var newtime = new Date(market.marketDate);
                $("#marketDateModal").html(formatDate(newtime,"yyyy-MM-dd HH:mm:ss"));
                if(market.price == null || market.price == 0){
                    $("#priceModal").html("0.0");
                }else {
                    $("#priceModal").html(market.price + "(" + changeMoneyToChinese(market.price) + ")");
                }
                $("#remarkModal").html(market.remark);
                //销售详细信息
                var tableContent = "";
                $.each(marketDetailList,function(index,marketDetail){
                    tableContent += '<tr>';
                    var productType = "productId" + marketDetail.product.productType;
                    tableContent += '<td>'+ productCodeMap[''+ productType +''] +'</td>';
                    tableContent += '<td>'+ marketDetail.product.productNo +'</td>';
                    tableContent += '<td>'+ marketDetail.singlePrice +'</td>';
                    tableContent += '<td>'+ marketDetail.quantity +'</td>';
                    tableContent += '<td>'+ marketDetail.totalPrice +'</td>';
                    tableContent += '</tr>';
                });
                $("#marketDetailTable tbody").html(tableContent);
            }
        });
        $("#viewDetailModal").modal("show");
    }
    function printMarket(){
        var printHtml = $("#viewDetailModal").html();
        alert(printHtml);
        window.print();
    }
    //查看销售文件
    function viewFile(id){
        $.ajax({
            url:"/marketController/viewMarketFile",
            type:'POST',
            data : {marketId:id},
            async : false,
            success:function (data) {
                var fileList = data.obj;
                var listHtml = "";
                if(fileList.length > 0){
                    $(fileList).each(function(i,e){
                        listHtml += '<tr><td>' + e.fileName + '</td><td><a onclick="downLoadFile('+ e.id +');">下载</a>&nbsp;<a onclick="deleteFile('+ e.id +')">删除</a></td></tr>';
                    });
                }
                currentMarketId = id;
                $('#viewMarketFileTable tbody').html(listHtml);
                $("#viewMarketFileModal").modal("show");
            }
        });
    }
    //上传文件
    function upload(){
        var formData = new FormData();
        var file = document.getElementById("file").files[0];
        if(file == undefined || file == ''){
            alert("请选择文件");
            return;
        }
        formData.append("file", file);
        formData.append("marketId", currentMarketId);
        $.ajax({
            url: '/marketController/uploadMarketFile',
            type: "POST",
            data: formData,
            /**
             *必须false才会自动加上正确的Content-Type
             */
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            success: function (msg) {
                var marketFile = msg.obj;
                alert("上传成功");
//                $('#viewMarketFileTable tbody').append('<tr><td>' + e.fileName + '</td><td><a onclick="downLoadFile('+ e.id +');">下载</a>&nbsp;<a onclick="deleteFile('+ e.id +')">删除</a></td></tr>');
                $("#viewMarketFileModal").modal("hide");
            },
            error: function () {
                alert("上传失败！");
            }
        });
    }
    function downLoadFile(fileId){
        window.location.href = '/marketController/downLoadMarkerFile?fileId=' + fileId;
    }
    function deleteFile(fileId){
        $.ajax({
            url: '/marketController/deleteMarketFile?fileId=' + fileId,
            success: function (msg) {
                alert("删除成功!");
                $("#viewMarketFileModal").modal("hide");
            },
            error: function () {
                alert("删除失败");
            }
        });
    }
</script>
<body>
<!--导航栏-->
<nav id="indexNav" class="navbar navbar-default" role="navigation" style="height: 50%;"></nav>
<div class="container" id="indexContainer">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row" id="searchDiv">
                <div class="col-md-3 col-sm-2 col-xs-12 form-inline">
                    <label>商品类型:</label>
                    <select id="productType" class="form-control" >
                        <option value="">全部</option>
                        <option th:each="productType:${productTypes}" th:value="${productType.code}" th:text="${productType.name}">
                        </option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 form-inline">
                    <label>商品编号:</label>
                    <input  type="text" class="form-control" id="productNo" placeholder="请输入商品编号"/>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 form-inline">
                    <label>客户名称:</label>
                    <input  type="text" class="form-control" id="customerName" placeholder="请输入客户名称"/>
                </div>
                <div style="margin-top: 5px;" class="col-md-12 col-sm-12 col-xs-12 form-inline">
                    <label for="marketDateBegin">日期范围选择：</label>
                    <div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="marketDateBegin" data-link-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" value="" readonly="readonly"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="marketDateBegin" value="" />
                    <div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="marketDateEnd" data-link-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" value="" readonly="readonly"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="marketDateEnd" value="" />
                </div>
            </div>
            <div class="row" style="margin-top: 5px;">
                <div class="col-md-6 col-sm-6 col-xs-12 form-inline">
                    <button type="button" onclick="search();" class="btn btn-primary">查询</button>
                    <button type="button" data-toggle="modal" onclick="add('');" class="btn btn-success">新增</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="table-responsive">
            <table id="showListTable" class="table table-hover">
                <caption>销售列表 </caption>
                <thead>
                <tr>
                    <th field="id" style="display: none">编号</th>
                    <th field="marketNo">销售编号</th>
                    <th field="customerName">客户名称</th>
                    <th field="price">销售金额</th>
                    <th field="marketDate" datatype="datetime">销售日期</th>
                    <th field="opt">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="pagination-p" class="col-md-12 col-sm-12" style="margin-top: -35px;">
            <ul id="pagination-c" class="pagination-md"></ul>
        </div>
    </div>

</div>
<!-- 销售详细模态框 -->
<div class="modal fade" id="viewDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">销售详细</h4>
            </div>
            <div class="modal-body">
                <table id="marketMainTable" class="table table-bordered">
                    <caption>销售信息</caption>
                    <tbody>
                        <tr>
                            <td>客户名称</td>
                            <td id="customerNameModal"></td>
                            <td>销售日期</td>
                            <td id="marketDateModal"></td>
                        </tr>
                        <tr>
                            <td>金额</td>
                            <td id="priceModal" colspan="3"></td>
                        </tr>
                        <tr>
                            <td>备注信息</td>
                            <td id="remarkModal" colspan="3"></td>
                        </tr>
                    </tbody>
                </table>
                <table id="marketDetailTable" class="table table-bordered">
                    <caption>销售详细信息</caption>
                    <thead>
                    <tr>
                        <th>商品类型</th>
                        <th>商品编号</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>总价</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" onclick="printMarket();" class="btn btn-primary">打印</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 销售文件模态框 -->
<div class="modal fade" id="viewMarketFileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">销售文件</h4>
            </div>
            <div class="modal-body">
                <table id="viewMarketFileTable" class="table table-bordered">
                    <caption>已上传文件</caption>
                    <thead>
                    <tr>
                        <td>文件名称</td>
                        <td style="width: 20%;">操作</td>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <table class="table table-bordered">
                    <caption>上传文件</caption>
                    <thead>
                    <tr>
                        <td>文件路径</td>
                        <td>
                            <form enctype="multipart/form-data">
                                <input type="file" name="file" id="file"/>
                            </form>
                        </td>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" onclick="upload();" class="btn btn-primary">上传文件</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" onclick="printMarket();" class="btn btn-primary">打印</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--退出确认模态框-->
<form th:action="@{/logout}" method="post" id="logoutform" style="display: none;">
    <input type="submit" value="登出"/>
</form>
<a style="display: none;" href="#" class="trigger-success">Success</a>
<a style="display: none;" href="#" class="trigger-error">Error</a>
<script th:src="@{/js/tooltips/iziToast.min.js}" type="text/javascript"></script>
<script th:src="@{/js/util.js}"></script>

</body>
</html>